<template>
  <div>
    <van-nav-bar :border="false" fixed title="我的积分" left-arrow @click-left="GOback" placeholder />
    <!-- 余额 -->
    <section class="content_container">
      <section class="content">
        <!-- 当前余额 -->
        <header class="content_header">
          <span class="content_title_style">当前积分</span>
          <div class="detailsRight">
            <img src="@/assets/img/details.png" alt="">
            <!--跳转至余额说明 -->
            <span class="contetn_description" @click="$router.push('/points/detail')">积分说明</span>
          </div>
        </header>
        <p class="content_num">
          <span>0</span>
          <span>元</span>
        </p>
        <div class="promit_button" @click="show = true">积分兑换商品</div>
      </section>
    </section>
    <p class="deal_detail">最近30天积分纪录</p>
    <div class="no_log">
      <img src="@/assets/img/none.png" alt="">
      <p>最近30天无积分纪录</p>
      <p>快去下单赚取大量积分吧</p>
    </div>
    <van-dialog v-model="show" confirmButtonColor="#3199e8">
      <template #default>
        <div class="tip_icon">
          <span></span>
          <span></span>
        </div>
        <p class="tip_text">快去下单赚取大量积分吧</p>
      </template>
    </van-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  },
  methods: {
    GOback() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="less" scoped>
.content_container .content .promit_button {
  background-color: #fe6d47;
}
.no_log p:nth-of-type(2) {
  color: #999;
  font-size: 0.5rem;
}
</style>